<template>
  <div id="login"></div>
  <div class="but" @click="login" ref="but">
    <div class="t">
      <div class="content">登录</div>
    </div>
    <div class="t-b"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    login() {
      window.setCookie("name", "张三", 60 * 30 * 1000);
      this.$router.push({ path: "/" });
    },
  },
  mounted() {
    var but = this.$refs.but;
    function changeSize() {
      var w = Math.sqrt(Math.pow(but.clientWidth, 2) + Math.pow(but.clientHeight, 2));
      but.style.setProperty("--borderSzie", w + "px");
    }
    changeSize();
    window.onresize = function () {
      changeSize();
    };
  },
};
</script>
<style scoped>
#login {
  font-size: 5vw;
  background: #000;
  --butradius: 0%;
  width: 100%;
  height: 100%;
}
.but {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 30%;
  border-radius: var(--butradius);
  box-shadow: 0 0 10px 0;
}
.t,
.t-b {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  z-index: 10;
  transition: all 0.3s;
  border-radius: var(--butradius);
}
.t-b {
  z-index: 1;
}
.t::before,
.t::after,
.t-b::before,
.t-b::after {
  content: "";
  position: absolute;
  background: linear-gradient(45deg, rgb(255, 0, 0), rgb(0, 0, 255));
  width: var(--borderSzie);
  height: var(--borderSzie);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: rrr 3s linear infinite;
  transition: all 0.3s;
  opacity: 0;
}

.but:hover .t::before,
.but:hover .t::after,
.but:hover .t-b::before,
.but:hover .t-b::after {
  opacity: 1;
}
.but:hover .content {
  width: calc(100% - 5vw);
  height: calc(100% - 5vw);
}
.but:hover .t-b {
  filter: blur(5vw);
}
.content {
  border-radius: var(--butradius);
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 1000;
  font-size: 6vw;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}
@keyframes rrr {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style>
